<template>
<div>
    <div class="floor">
       <slot name="sl">
           <div>
            <h3>手机通讯</h3>
            </div>
            <ul>
                <li><a href="#">热门2</a></li>
                <li><a href="#">大家电2</a></li>
                <li><a href="#">生活电器2</a></li>
                <li><a href="#">厨房电器2</a></li>
                <li><a href="#">应季电器2</a></li>
                <li><a href="#">空气/净水2</a></li>
                <li><a href="#">高端电器2</a></li>
            </ul>
                </slot>
    </div>
    <div class="tab-content">
         <div class="blockgary">
             <ul>
                 <li>节能补贴</li>
                 <li>4k电视</li>
                 <li>空气净化器</li>
                 <li>IH电饭煲</li>
                 <li>滚筒洗衣机</li>
                 <li>电热水器</li>
             </ul>
           <img src="../../../assets/img/电器1.png">
         </div>
         <div class="floorBanner">
           <Carousel :list="floorList"/>
           <!--        上面是对轮播图功能组件的封装-->
         </div>
         <div class="split">
          <img src="../../../assets/img/电器3.png"/>
          <img src="../../../assets/img/电器4.png"/>
         </div>
         <div class="splitcenter">
       <img src="../../../assets/img/电器5.png"/>
         </div>
        <div class="split-end">
           <img src="../../../assets/img/电器6.png"/>
           <img src="../../../assets/img/电器7.png"/>
        </div>
    </div>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
    name:'floor',
  computed:{
    ...mapState({
      //这是vuex提供的函数,直接使用函数名可以直接用(是一个语法糖,直接获取state里面的数据不能用箭头函数,而是用普通函数)
      floorList:state=>state.floorList.data
    })
  },
  mounted() {
   this.$store.dispatch('getFloorList')
  },
}
</script>
<style scoped lang="less">
.floor{
  width: 1200px;
  height: 48px;
  margin: 15px auto 0;
  div{
  height: 48px;
  float: left;
h3{
    margin-left: 31px;
    line-height: 48px;
    color:rgb(200, 22, 35);
    font-size: 20px;
}
  }
    ul{
        width: 540px;
        height: 48px;
        float:right;
        margin-right:31px;
      li{
          line-height: 48px;
        float: left;
        font-size: 12px;
        a{
            color:rgb(102, 102, 102);
        }
      }
      li:nth-child(1){
          a{
              color:rgb(200, 22, 35);
          }
      }
      li:nth-child(1)::after{
           width: 57px;
          height: 17px;
       content: '|';
        padding:0 13px;
color:rgb(200, 22, 35);
      }
 li:nth-child(2)::after{
           width: 59px;
          height: 18px;
       content: '|';
        padding:0 13px;
      }
 li:nth-child(3)::after,li:nth-child(4)::after,li:nth-child(5)::after,li:nth-child(6)::after{
           width: 71px;
          height: 18px;
       content: '|';
        padding:0 13px;
      }

  }
}
.tab-content{
    width: 1200px;
    height: 360px;
    margin: 0 auto;
    border-bottom: 1px solid rgb(228, 228, 228);
    border-top:2px solid rgb(200, 22, 35);
    .blockgary{
         float: left;
        width: 240px;
        height: 360px;
    ul{
        width: 209px;
        height: 81px;
        padding:15px 0;
        li{
            margin:0 10px;
            font-size: 12px;
            float: left;
            width: 83px;
            height: 27px;
            text-align: center;
            border-bottom:1px solid rgb(228, 228, 228);
        }
    }
    img{
        height: 255px;
        width: 238px;
    }
    }
    .floorBanner{
        width:330px;
         float: left;
        height: 360px;
        img{
          height: 360px;
           width:330px;
        }
    }
.split{
    float: left;
    width: 219px;
    height: 360px;
    img{
        width: 100%;
        height: 50%-1px;
    }
}
.splitcenter{
    float: left;
    width: 222px;
    height: 362px;
    border-left: 1px solid rgb(228, 228, 228);
    border-right: 1px solid rgb(228, 228, 228);
}
.split-end{
    float: left;
    height: 362px;
    width: 170px;
    img{
        width: 190px;
        height: 175px;
    }
    img:nth-child(1){
      border-bottom: 1px solid rgb(228, 228, 228);
    }
}
}
</style>
